<!--  -->
<template>
  <div>
      <div class="goods" v-for="(item,index) in cartarry" :key="index">
          {{item.title}}
          <div class="goodsright">
              <i class="cubeic-remove" @click="removeCart(index)"></i>
                    <span>{{item.cartCount}}</span>
               <i class="cubeic-add" @click="addart(index)"></i>
          </div>
         
      </div>
       <cube-button style="margin:10px 0;">下单</cube-button>
          <cube-button @click="clearcart">清空购物车</cube-button>
  </div>
</template>

<script>
import {mapState} from "vuex"
export default {
  data () {
    return {
      
    };
  },
  computed:{
      ...mapState({
          cartarry:state=>state.cartarry
      })
  },
 methods:{
    //   商品减少
    removeCart(index){
        this.$store.commit('careremove',index)
    },
    // 商品增加
    addart(index){
        this.$store.commit('cartadd',index)
    },
    // 清空购物车
    clearcart(state){
           
           this.$store.commit('cleaderbox')
           this.$router.replace({path:"/batnav/shopcler"})
    }
    }
  

  
}

</script>
<style>
.goods{
    padding: 10px;
    text-align: left;
}
.goods .maginpp{
    margin-top:10px;
}

.goods .goodsright i{
    font-size: 18px;
}

</style>